<style scoped>
.p_c1{
    width:50%;float: left;padding-left: 10px;
    span{line-height: 22px;}
}
.i1{font-size:30px;cursor:pointer;position: absolute;left:-30px;top:50%;}
.i2{font-size:30px;cursor:pointer;position: absolute;right:-30px;top:50%;}
.dis{color:#ccc;}
.pp_cc{min-height: 200px;text-align: center;line-height: 200px;position: relative;}
.div_cd1:after{content: "";display: block;clear: both;}
.div_cd2{float: right;width:250px;}
.div_cd2 p{line-height: 23px;}
.div_cd2 span{color:#e7922d;}
.p_cd1{float: left;padding-top:69px;}
.p_cd1 span{color:#e7922d;}
.div_cd3{position: absolute;left:50%;width:300px;margin-left:-150px;margin-top: 23px;
border-bottom: 2px #e7922d solid;}
.div_cd3 p{text-align: center;color:#e7922d;font-size:22px;font-weight: 400;
border-bottom: 2px #e7922d solid;margin-bottom: 2px;padding-bottom: 5px;}

</style>
<template>
<div>
     <Modal v-model="modal" :title="title" :styles="{width:'1100px',top:'20px'}">
        <div style="margin-left:32px;width:1000px;position:relative;">
            
            <i  class="i1 ivu-icon ivu-icon-ios-arrow-back" :class="{dis:index==0}" @click="prev"></i>
            <i  class="i2 ivu-icon ivu-icon-ios-arrow-forward" :class="{dis:index==num}" @click="next"></i>
            <div class="div_cd1">
                <p  class="p_cd1"><span>当前单据号:</span>{{guid.orderNo}}</p>
                <div class="div_cd3">
                    <p>增值税电子普通发票</p>
                </div>
                <div class="div_cd2">
                    <p><span>发票代码:</span>xxx</p>
                    <p><span>发票号码:</span>xxx</p>
                    <p><span>开票日期:</span>xxx</p>
                    <p><span>校 验 码:</span>xxx</p>
                </div>
            </div>
            <p v-if="message!=''" class="pp_cc">{{message}}</p>
            <div class="div_box1a" v-else>
                <Row :gutter="10" style="font-size:12px;"  class="r1">
                    <Col span="1" style="text-align:center;"><br/>购<br/>买<br/>方</Col>
                    <Col span="15" class="bor_left" style="height:120px;">
                        <p><span>名称:</span>{{data.mainVo.GMF_MC}}</p><br/>
                        <p><span>纳税人识别号:</span>{{data.mainVo.GMF_NSRSBH}}</p><br/>
                        <p><span>地 址、电 话:</span>{{data.mainVo.GMF_DZDH}}</p><br/>
                        <p><span>开户行及帐号:</span>{{data.mainVo.GMF_YHZH}}</p><br/>
                    </Col>
                    <Col span="1" class="bor_left" style="height:120px;text-align:center;">
                    <br/>密<br/>码<br/>区</Col>
                    <Col span="7" class="bor_left" style="height:120px;">
                        <em>fdr</em>
                    </Col>
                </Row>
                <Row :gutter="10" class="r2b">
                    <Col span="5">
                        货物或应税劳务、服务名称
                    </Col>
                    <Col span="4" class="bor_left2b">
                        规格型号
                    </Col>
                    <Col span="2"  class="bor_left2b">单位
                    </Col>
                    <Col span="2"  class="bor_left2b">数量
                    </Col>
                    <Col span="2"  class="bor_left2b">
                    单价

                    </Col>
                    <Col span="3"  class="bor_left2b" >金额
                    </Col>
                    <Col span="3"  class="bor_left2b" >税率

                         
                    </Col>
                    <Col span="3" class="bor_left2b">税额
                    </Col>
                </Row>
                <Row :gutter="10" class="r2 r3d">
                    <Col span="5">
                        <p v-for="(item,index) in data.detailList" :key="index+'1'">
                            {{item.goodsName}}
                        </p>
                    </Col>
                    <Col span="4" class="bor_left2b">
                        <p v-for="(item,index) in data.detailList" :key="index+'2'">
                            {{item.goodsSpecification}}
                        </p>
                    </Col>
                    <Col span="2"  class="bor_left2b">
                        <p v-for="(item,index) in data.detailList" :key="index+'3'">
                            {{item.goodsUnit}}
                        </p>
                    </Col>
                    <Col span="2"  class="bor_left2b">
                        <p v-for="(item,index) in data.detailList" :key="index+'4'"  class="r">
                            {{item.goodsQuantity}}
                        </p>
                    </Col>
                    <Col span="2"  class="bor_left2b">
                        <p v-for="(item,index) in data.detailList" :key="index+'5'"  class="r">
                            {{item.goodsPrice}}元
                        </p>
                    </Col>
                    <Col span="3"  class="bor_left2b" >
                        <p v-for="(item,index) in data.detailList" :key="index+'6'"  class="r">
                            {{item.goodsTotalPrice}}元
                        </p>
                    </Col>
                    <Col span="3"  class="bor_left2b" >
                        <p v-for="(item,index) in data.detailList" :key="index+'7'"  class="r">
                            {{item.goodsTaxRate}}
                        </p>
                    </Col>
                    <Col span="3" class="bor_left2b">
                        <p v-for="(item,index) in data.detailList" :key="index+'8'"  class="r">
                            {{item.goodsTotalTax}}
                        </p>
                    </Col>
                </Row>
                <Row :gutter="10" class="r2">
                    <Col span="5">
                        <p  style="text-align:center;">合计</p>
                    </Col>
                    <Col span="4" class="bor_left2b">
                        <p></p>
                    </Col>
                    <Col span="2"  class="bor_left2b"><p></p>
                    </Col>
                    <Col span="2"  class="bor_left2b"><p></p>
                    </Col>
                    <Col span="2"  class="bor_left2b">
                    <p></p>

                    </Col>
                    <Col span="3"  class="bor_left2b">
                        <p class="r">￥32431.24</p>
                    </Col>
                    <Col span="3"  class="bor_left2b" >
                         <p></p>
                    </Col>
                    <Col span="3" class="bor_left2b">
                        <p class="r">￥32431.24</p>
                    </Col>
                </Row>
                <Row :gutter="10" class="r3">

                    <Col span="5" style="text-align:center;">价税合计（ 大 写 ）</Col>
                    <Col span="19" class="bor_left3">


                    <em class="em1c">
                        43143214123
                    </em>
                    (小写)&nbsp;&nbsp;
                    <em class="em1d">324324324.432</em></Col>
                </Row>
                <Row :gutter="10" style="font-size:12px;"  class="r4">
                    <Col span="1" style="text-align:center;"><br/>销<br/>售<br/>方</Col>
                    <Col span="15" class="bor_left4" style="height:120px;">
                        <p><span>名称:</span>{{data.mainVo.XSF_MC}}</p><br/>
                        <p><span>纳税人识别号:</span>{{data.mainVo.XSF_NSRSBH}}</p><br/>
                        <p><span>地 址、电 话:</span>{{data.mainVo.XSF_DZDH}}</p><br/>
                        <p><span>开户行及帐号:</span>{{data.mainVo.XSF_YHZH}}</p><br/>
                    </Col>
                    <Col span="1" class="bor_left4" style="height:120px;text-align:center;">
                    <br/><br/>备<br/>注</Col>
                    <Col span="7" class="bor_left4" style="height:120px;">
                        <em></em>
                    </Col>
                </Row>
                <p class="p_5" style="padding-top:10px;"> 
                    <span>收 款 人 ：43214312</span>
                    <span>复核 ：fdsfdas</span>
                    <span>开票人 ：fdsafa</span>
                    <span>销售方 ： （章）</span>
                </p>
            </div>
            
            
            
        </div>     
         <div slot="footer">
             <Button @click="cancel()">关闭</Button>
             
         </div>
     </Modal>
</div>
</template>
<script>
 export default {
     data (){
         return {
             modal:false,title:'开票预览',status:'',
             data:{mainVo:{},},guid:{},list:[],index:0,num:0,message:''
         }
     },methods:{
        prev(){
            if(this.index>0){
                this.index-=1;
                this.guid=this.list[this.index];
                this.getdata();
            }
            
        },next(){
            if(this.index<this.num){
                this.index+=1;
                this.guid=this.list[this.index];
                this.getdata();
            }
        },
         showdata(params){
            console.log(params)
            this.list=params.data;
            this.index=-1;
            this.num=this.list.length-1;
            //this.data= {};
            this.index=0;
            this.guid=this.list[this.index]
            this.getdata();
            
            
            
         },getdata(){

            //if(this.index<this.num){
                //this.index+=1;
                //this.guid=this.list[this.index];

                this.axios.post('/outputinoivce/invoicePreview',
                    [this.guid.guid]).then((res)=>{
                    console.log(res)
                    if(!res.data){
                        //this.$Message.success(res.message);
                        this.message=res.message;
                    }else{
                        //this.$Message.error(res.message);
                        this.data=res.data;
                        this.message='';
                    }
                    this.modal=true;
                    
                })
                
            //}
         },
         cancel(){
             this.modal=false;
         },sub(){
            this.axios.post('/outputinoivce/makeByOrder',[this.guid]).then((res)=>{
                console.log(res);
                this.modal=false;
                if(res.errorCode==0){
                     this.$Message.success(res.message);
                     this.$emit('refresh')
                 }else{
                     //this.$Message.error(res.message);
                 }
                
                
            })
         }
     },created(){
         this.$parent.$on('bus_setsedits', this.showdata);
         
     },beforeDestroy(){
         this.$parent.$off('bus_setsedits',this.showdata)
     }
 }
</script>
